<template>
  <div class="classify">
    <div class="classify_head">
      <div class="classify_head_left">编辑规格型号</div>
      <div class="classify_head_right" @click="saveSpec">确定</div>
    </div>
    <div class="classify_con">
      <div class="spec_list" v-for="(item,index) in list">
        <div class="spec_list_left">
          <div class="spec_list_box">
            <div class="spec_list_box_left">规格型号</div>
            <div class="spec_list_box_right">
              <input type="text" placeholder="例如小号红色50厘米" v-model="item.goods_ext_style">
            </div>
          </div>
          <div class="spec_list_box">
            <div class="spec_list_box_left">销售价格</div>
            <div class="spec_list_box_right">
              <input type="number" placeholder="该型号的购买价格(元)" v-model="item.goods_ext_price">
            </div>
          </div>
          <div class="spec_list_box">
            <div class="spec_list_box_left">市场价</div>
            <div class="spec_list_box_right">
              <input
                type="number"
                placeholder="外面市场的对比销售价格(元)"
                v-model="item.goods_ext_market_price"
              >
            </div>
          </div>
          <div class="spec_list_box">
            <div class="spec_list_box_left">库存</div>
            <div class="spec_list_box_right">
              <input type="number" placeholder="外面市场的对比销售价格(元)" v-model="item.goods_ext_stock">
            </div>
          </div>
          <div class="spec_list_box">
            <div class="spec_list_box_left">会员折扣</div>
            <div class="spec_list_box_right">
              <span>-&nbsp;</span>
              <input type="number" placeholder="销售价基础上享受的减价(元)" v-model="item.goods_ext_vip_price">
            </div>
          </div>
        </div>
        <div class="spec_list_right" @click="delSpec(index)">
          <img src="../../../static/image/share5.png" alt>
        </div>
      </div>
    </div>
    <div class="classify_footer" @click="addSpec">新增规格型号</div>
  </div>
</template>

<script>
export default {
  props: ["goods_id"],
  data() {
    return {
      list: [],
      number: 0
    };
  },
  mounted() {
    this.get_goods_ext_list();
  },
  methods: {
    // 获取商品规格列表
    get_goods_ext_list() {
      this.appJS.ajax(
        "user.get_goods_ext_list",
        "post",
        {
          goods_id: this.goods_id,
          mask: "none"
        },
        res => {
          if (res.recode == 1) {
            if (res.data.goods_ext_list.length == 0) {
              this.list = [
                {
                  goods_ext_market_price: "",
                  goods_ext_price: "",
                  goods_ext_stock: "",
                  goods_ext_style: "",
                  goods_ext_vip_price: ""
                }
              ];
            } else {
              this.list = res.data.goods_ext_list;
            }
          }
        }
      );
    },
    setClass() {},
    // 新增规格
    addSpec() {
      let data = this.list[this.list.length - 1];
      if (
        data.goods_ext_market_price == "" ||
        data.goods_ext_price == "" ||
        data.goods_ext_stock == "" ||
        data.goods_ext_style == ""
      ) {
        this.$toast("请将信息填写完整");
        return;
      } else {
        this.list = [
          ...this.list,
          {
            goods_ext_market_price: "",
            goods_ext_price: "",
            goods_ext_stock: "",
            goods_ext_style: "",
            goods_ext_vip_price: ""
          }
        ];
      }
    },
    // 删除规格
    delSpec(index) {
      if (this.list.length == 1) {
        this.$emit("closeSpec");
      } else {
        this.list.splice(index, 1);
      }
    },
    // 保存规格
    saveSpec() {
      let data = this.list[this.list.length - 1];
      if (
        data.goods_ext_market_price == "" ||
        data.goods_ext_price == "" ||
        data.goods_ext_stock == "" ||
        data.goods_ext_style == ""
      ) {
        this.$toast("请将信息填写完整");
        return;
      }
      let spec_data={}
      for (let i in this.list) {
        for (let j in this.list[i]) {
          if (j == "goods_ext_style") {
            spec_data[`goods_ext_style_${parseInt(i) + 1}`] = this.list[i][j]
          }else if (j == "goods_ext_price") {
            spec_data[`goods_ext_price_${parseInt(i) + 1}`] = this.list[i][j]
          }else if (j == "goods_ext_stock") {
            spec_data[`goods_ext_stock_${parseInt(i) + 1}`] = this.list[i][j]
          }else if (j == "goods_ext_vip_price") {
            spec_data[`goods_ext_vip_price_${parseInt(i) + 1}`] = this.list[i][j]
          }
        }
      }
      console.log(spec_data)
      spec_data.goods_ext_line = this.list.length;
      spec_data.goods_id = this.goods_id;
      this.appJS.ajax(
          "user.goods_ext_edit_post",
          "post",
          spec_data,
          res => {
            if (res.recode == 1) {
              this.$toast("编辑成功")
              setTimeout(() => {
                this.$emit('saveSpec')
              }, 1000);
              
            }
          }
        );
    }
  },
  components: {}
};
</script>

<style lang='less'>
.mint-toast{
  z-index: 999999999999999999;
}
.classify {
  height: calc(100vh - 60px);
  background: #fff;
  width: 100%;
  overflow-y: auto;
  position: relative;
  &::-webkit-scrollbar {
    display: none;
  }
  .classify_head {
    height: 3rem;
    width: 100%;
    padding: 0 0.5rem;
    font-size: 0.9rem;
    color: #fff;
    background: @color;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .classify_head_left {
      height: 100%;
      width: 80%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .classify_head_right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 20%;
      height: 100%;
      padding-right: 0.5rem;
    }
  }
  .classify_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 3rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    color: #fff;
    background: @color;
  }
  .classify_con {
    padding-top: 3rem;
    padding-bottom: 3rem;
    .spec_list {
      // height: 50vw;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      background: #fff;
      border-bottom: 0.5rem solid #efefef;

      .spec_list_left {
        height: 100%;
        width: calc(100% - 12.5vw);
        .spec_list_box {
          height: 12.5vw;
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          border-bottom: 1px solid #efefef;
          padding: 0 0.5rem;
          font-size: 0.8rem;
          &:last-child {
            border: 0;
          }
          .spec_list_box_left {
            width: 25%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
          .spec_list_box_right {
            height: 100%;
            width: 75%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            input {
              font-size: 0.8rem;
              color: #888;
              height: 90%;
              width: 90%;
            }
          }
        }
      }
      .spec_list_right {
        height: 12.5vw;
        width: 12.5vw;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          height: 1.5rem;
          width: 1.5rem;
        }
      }
    }
  }
}
</style>
